<template>
    <div id="box">
        <div class="loginHead">
            登录
        </div>
        <div class="loginContainer">
                <div>

                    <el-input
                            placeholder="请输入帐号"
                            v-model="nick"
                            clearable
                            name="username"
                            ref="username"
                            v-popover:popover1>
                    </el-input>
                </div>

                <div>
                    <el-input v-popover:popover2 placeholder="请输入密码" name="password" v-model="password" show-password>
                    </el-input>

                </div>

                <div class="btn">
                    <el-button type="primary" icon="el-icon-check" :loading="loading" circle @click="login"></el-button>
                </div>


        </div>

    </div>
</template>

<script>
    export default {
        data() {
            return {
                nick:'',
                password:'',
                loading:false
            };
        },
        methods: {
            login(){
                // let data=this.$qs.stringify({
                //     username :this.username,
                //     password :this.password
                // })
                let params = {
                    nick :this.nick,
                    password :this.password
                }
                this.loading=true
                this.$axios({
                    method:'post',
                    url:'/user/login',
                    data:params,
                }).then(result=>{
                    const userInfo = result.data.userInfo;
                    setTimeout(()=>{
                        if(userInfo!=null){
                            this.$message.success('登录成功')
                            this.$store.state.user = userInfo
                            sessionStorage.setItem('user',window.JSON.stringify(userInfo))
                            this.$emit('loginSuc')
                            this.loading=false
                        }else{
                            this.$message.error('用户名或密码错误')
                            this.loading=false
                        }
                    },1000)
                }).catch(err=>{
                    this.$message.error('网络错误')
                    this.loading=false
                })
            }
        },
        mounted() {
        }
    };
</script>

<style lang="less" scoped>
    #box{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .btn{
        display: flex;
        flex-direction: row;
        justify-content: center;
    }
    .el-button{
        margin-top: 20px;
        width: 100px;
        height: 100px;
        font-size: 50px;
    }
    .loginContainer{
        width: 95%;
        display: flex;
        flex-direction: column;
    }
</style>